<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span>
                {{$t('mertnam')}}
                <el-input v-model.trim="selectParam.merName" :placeholder="$t('plsipt')" size="mini"></el-input>
                {{$t('mertid')}}
                <el-input v-model.trim="selectParam.merId" :placeholder="$t('plsipt')" size="mini"></el-input>
                {{$t('mersta')}}
                <el-select v-model="selectParam.merStatus" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('vlid')" value="VALID"></el-option>
                    <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    <el-option :label="$t('frze')" value="FROZEN"></el-option>
                </el-select>
            </span>
            <el-button type="primary" @click="inqmerList" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" row-key="merId" :data="result">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="merId" :label="$t('mertid')" min-width="171">
                </el-table-column>
                <el-table-column prop="merName" :label="$t('mertnam')" min-width="112">
                </el-table-column>
                <el-table-column prop="merStatus" :label="$t('mersta')" min-width="125">
                </el-table-column>
                <el-table-column prop="bankCardNo" :label="$t('pubacc')" min-width="118">
                </el-table-column>
                <el-table-column prop="merUserName" :label="$t('accadmin')" min-width="162">
                </el-table-column>
                <el-table-column prop="gmtCreate" :label="$t('efftim')" min-width="156">
                </el-table-column>
                <el-table-column :label="$t('opratn')" width="270" fixed="right">
                    <template slot-scope="scope">
                        <span v-if="scope.row.merId !== '1000000000'">
                            <el-link type="primary" @click="showFreeze(scope.row, 'FROZEN', 'MER_FROZEN')" v-if="scope.row.merStatus === $t('vlid')">{{$t('frze')}}</el-link>
                            <el-link type="primary" @click="showUnfreeze(scope.row, 'VALID', 'MER_UNFROZEN')" v-if="scope.row.merStatus === $t('frze')">{{$t('umfrz')}}</el-link>
                        </span>
                        <el-link type="primary" @click="productList(scope.row)">{{$t('productlist')}}</el-link>
                        <!-- <el-link type="primary" @click="userList(scope.row.merId)">{{$t('usrlist')}}</el-link> -->
                        <el-link type="primary" @click="clearRules(scope.row)">{{$t('settlerules')}}</el-link>
                        <el-link type="primary" @click="detail(scope.row)">{{$t('detls')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="selectParam.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="selectParam.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 冻结弹框 -->
        <el-dialog :title="$t('frozenuser')" :visible.sync="freezeDialogVisible" width="30%" @close="freezeDialogVisibleClosed(operAcc)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="operAcc" :rules="operAccRul" :model="operAcc" label-width="80px" :hide-required-asterisk="true">
                 <el-form-item :label="$t('remk')" prop="remark">
                    <el-input v-model.trim="operAcc.remark" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="freezeA(operAcc)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="freezeDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- 解冻弹框 -->
        <el-dialog :title="$t('unfrozenuser')" :visible.sync="unfreezeDialogVisible" width="30%" @close="unfreezeDialogVisibleClosed(operAcc)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="operAcc" :rules="operAccRul" :model="operAcc" label-width="80px" :hide-required-asterisk="true">
                 <el-form-item :label="$t('remk')" prop="remark">
                    <el-input v-model.trim="operAcc.remark" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="freezeB(operAcc)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="unfreezeDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getmerlist,
    settleupdatestatus
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            isOk: false,
            total: 0,
            // 查询条件
            selectParam: {
                merId: null,
                merName: null,
                merStatus: null,
                pageSize: 10,
                pageNum: 1
            },
            operAcc: {
                applyType: null,
                merId: 0,
                merName: null,
                remark: null,
                status: null,
                sysUserName: null
            },
            operAccRul: {
                remark: [
                    { required: true, message: this.$t('notecantbeemt'), trigger: 'blur' }
                ]
            },
            // 列表数据
            result: [],
            // $t('mersta')
            merStatus: '',
            freezeDialogVisible: false,
            unfreezeDialogVisible: false
        }
    },
    methods: {
        // 查询功能
        seachMerList () {
            getmerlist(JSON.stringify(this.selectParam)).then(res => {
                this.result = res.data.data.list
                this.total = res.data.data.total - 0
                if (!this.result) return false
                this.result.forEach(list => {
                    if (list.merStatus === 'INVALID') list.merStatus = this.$t('invlid')
                    if (list.merStatus === 'VALID') list.merStatus = this.$t('vlid')
                    if (list.merStatus === 'FROZEN') list.merStatus = this.$t('frze')
                    if (list.merStatus === 'UNFROZEN') list.merStatus = this.$t('umfrz')
                    if (list.status === 'CLOSED') list.status = this.$t('cancellation')
                })
            })
        },
        inqmerList () {
            this.selectParam.pageNum = 1
            this.seachMerList()
        },
         // 监听页面展示数据条数变化
        handleSizeChange (newSize) {
            this.selectParam.pageSize = newSize
            this.seachMerList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.selectParam.pageNum = newNum
            this.seachMerList()
        },
        // 详情
        detail(mer) {
            this.$router.push('/sec/merManage/merDetail')
            window.sessionStorage.setItem('merStatus', mer.merStatus)
            window.sessionStorage.setItem('mercretime', mer.gmtCreate)
            window.sessionStorage.setItem('merId', mer.merId)
            window.sessionStorage.setItem('mername', mer.merName)
            window.sessionStorage.setItem('merusername', mer.merUserName)
        },
        // 产品列表
        productList(mer) {
            this.$router.push('/sec/productList')
            window.sessionStorage.setItem('mername', mer.merName)
            window.sessionStorage.setItem('merId', mer.merId)
        },
        clearRules (mer) {
            this.$router.push('/sec/clearRulesList')
            window.sessionStorage.setItem('merId', mer.merId)
        },
        userList(merId) {},
        async showFreeze (data, status, type) {
            this.operAcc.merId = data.merId
            this.operAcc.merName = data.merName
            this.operAcc.applyType = type
            this.operAcc.status = status
            this.operAcc.sysUserName = data.merUserName
            this.freezeDialogVisible = true
        },
        async freezeA () {
            settleupdatestatus(JSON.stringify(this.operAcc)).then(res => {
                if (res.data.code === '000000') {
                    this.isFre = true
                    this.isUnfre = true
                    this.freezeDialogVisible = false
                    this.$message({
                        message: this.$t('frozentaskaddsuc'),
                        type: 'success'
                    })
                    this.getmerAccForm()
                }
                if (res.data.code === '992127') {
                    this.$message.error(this.$t('thismerprosub'))
                    this.freezeDialogVisible = false
                }
                if (res.data.code === '992107') {
                    this.$message.error(this.$t('thetaskisbe'))
                    this.freezeDialogVisible = false
                }
            })
        },
        freezeB () {
            settleupdatestatus(JSON.stringify(this.operAcc)).then(res => {
                if (res.data.code === '000000') {
                    this.isFre = true
                    this.isUnfre = true
                    this.unfreezeDialogVisible = false
                    this.$message({
                        message: this.$t('frozentaskaddsuc'),
                        type: 'success'
                    })
                    this.getmerAccForm()
                }
                if (res.data.code === '992127') {
                    this.unfreezeDialogVisible = false
                    this.$message.error(this.$t('thismerprosub'))
                }
                if (res.data.code === '992107') {
                    this.unfreezeDialogVisible = false
                    this.$message.error(this.$t('thetaskisbe'))
                }
            })
        },
        freezeDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        async showUnfreeze (data, status, type) {
            this.operAcc.merId = data.merId
            this.operAcc.merName = data.merName
            this.operAcc.applyType = type
            this.operAcc.status = status
            this.operAcc.sysUserName = data.merUserName
            this.unfreezeDialogVisible = true
        },
        async unfreeze (data, status) {},
        unfreezeDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        }
    },
    mounted () {
        this.seachMerList()
    }
}
</script>

<style lang="less" scoped>
@import './merList.less';
</style>
